HTML

 📌 <input type = text name = user id = user>
     <input type = password name = pass id = pass>
     <input type = password id = repass>

在每個INPUT後面加上ID

判斷密碼和再次輸入密碼，是否相同

 📌 document.querySelector('#repass').onblur=()=>
     {
         if(document.querySelector('#repass').value !=
         document.querySelector('#pass').value)
         {
             document.querySelector('#repass').value ="";
             document.querySelector('#pass').value="";
             alert('輸入不相同');
         }
     }

 📌 document.querySelector('#repass')

抓取ID = repass 的元素

 📌 document.querySelector('#repass').onblur

當repass元素的物件，被點擊後，鼠標離開物件觸發

 📌 document.querySelector('#repass').value

抓取repass元素物件的值

判斷密碼長度

 📌 document.querySelector('#pass').onblur=()=>
     {
         if((document.querySelector('#pass').value).length < 8)
         {
             document.querySelector('#pass').value="";
             alert('密碼太短');
         }
     }

 📌 document.querySelector('#pass').value).length

抓取repass元素物件的值長度

假設value內容為”123”，則回傳3

判斷密碼強度

 📌 document.querySelector('#pass').onblur=()=>
     {
         if((document.querySelector('#pass').value).length < 8)
         {
             document.querySelector('#pass').value="";
             alert('密碼太短');
         }
         $pass = document.querySelector('#pass').value;
         if (/[a-z]/.test($pass) && /[A-Z]/.test($pass))
         {
             if(!(/[!@#$%^&*()_+{}\[\]:;<>,.?~\\-]/.test($pass)))
             {
                 alert('密碼需含有特殊符號');
                 document.querySelector('#pass').value="";
             }
         }
         else
         {
             alert('密碼強度太低');
             document.querySelector('#pass').value="";
         }
     }

 📌 /[a-z]/.test($pass)

測試字串是否含有這些字元

程式碼收錄:https://github.com/chyhhwen/shopping-system